<template>
  <div class="home">
    <my-chart-map :data="selectData.data" :register="selectData.register" :map="selectData.name"></my-chart-map>
  </div>
</template>

<script>
import wuhan from "$ui/charts/geo/city/420100.json";
import yichang from "$ui/charts/geo/city/420500.json";
import { MyChartMap } from "$ui/charts";
export default {
  data() {
    return {
      data: [
        {
          name: "yichang",
          id: 1,
          data: {
            columns: ["区划", "人口数量"],
            rows: [
              ["宜都市", 100],
              ["枝江市", 60],
              ["当阳市", 78],
              ["点军区", 90],
              ["夷陵区", 110],
              ["秭归县", 87],
            ],
          },
          register: yichang,
        },
        {
          name: "wuhan",
          id: 2,
          data: {
            columns: ["区划", "人口数量"],
            rows: [
              ["洪山区", 100],
              ["江夏区", 60],
              ["汉阳区", 78],
              ["汉南区", 90],
              ["东西湖区", 110],
              ["武昌区", 87],
            ],
          },
          register: wuhan,
        },
      ],
      options: [
        {
          value: "wuhan",
          label: "武汉",
        },
        {
          value: "yichang",
          label: "宜昌",
        },
      ],
      value: "",
      selectData: {
        name: "宜昌",
        id: 1,
        data: {
          columns: ["区划", "人口数量"],
          rows: [
            ["宜都市", 100],
            ["枝江市", 60],
            ["当阳市", 78],
            ["点军区", 90],
            ["夷陵区", 110],
            ["秭归县", 87],
          ],
        },
        register: yichang,
      },
    };
  },
  components: {
    MyChartMap,
  },
  methods: {
    change(e) {
      console.log(e)
      this.data.forEach((item) => {
        if (item.name == e) {
          this.selectData = item;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .my-chart-21 {
    width: 100%;
    height: 100% !important;
  }
}
</style>
